<template>
    <div class="superviseList">
        <!-- 导航栏 -->
        <div class="header_body">
            <header-nav :leftArrow="true" :slefBack="true" titelText="立案列表" @goBack="goBack"></header-nav>
        </div>

        <div class="list">
            <van-search v-model="searchForm.keyword" placeholder="可输入单位名称、案件编号搜索" @update:model-value="onSearch" />
            <van-dropdown-menu>
                <van-dropdown-item v-model="searchForm.status" :options="taskData" @change="statusChange" />
            </van-dropdown-menu>
            <div class="table">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="tableList.length > 0">
                    <van-list v-model:loading="loading" :finished="finished" offset="10" finished-text="没有更多了"
                        @load="onLoad">
                        <div class="list-box" v-for="item in tableList" :key="item.id" @click="detailTask(item.id)">
                            <div class="boxTop">
                                <div class="title" style="max-width: 250px">
                                    {{ item.placeName }}
                                </div>
                                <div class="tag" :class="item.status == 1
                ? 'green'
                : item.status == 2
                    ? 'orige'
                    : item.status == 6
                        ? 'skygreen'
                        : ''
                ">
                                    {{
                item.status == 1
                    ? '立案'
                    : item.status == 2
                        ? '待处理'
                        : item.status == 6
                            ? '已结束'
                            : ''
            }}
                                </div>
                            </div>
                            <div class="boxContent">
                                <div class="text-row">
                                    <div class="row-msg">案件编号</div>
                                    <div class="row-txt">{{ item.caseCode }}</div>
                                </div>
                                <div class="text-row">
                                    <div class="row-msg">执法人员</div>
                                    <div class="row-txt">
                                        {{ item.sponsor + ',' + item.organizer }}
                                    </div>
                                </div>
                                <div class="text-row">
                                    <div class="row-msg">立案时间</div>
                                    <div class="row-txt">
                                        {{ item.createTime }}
                                    </div>
                                </div>
                            </div>
                            <div class="boxBtn">
                                <div class="boxBtn-1">
                                    <div class="btn1 lanBtn" style="border-right: 1px solid #f0f0f0"
                                        @click.stop="editTask(item.id, item.taskId)" v-if="item.editShowFlag == 1">
                                        编辑
                                    </div>
                                    <div class="btn1 lanBtn2" @click.stop="delTask(item.id, item.taskId)"
                                        v-if="item.deleteShowFlag == 1">
                                        删除
                                    </div>
                                </div>
                                <div class="boxBtn-2" v-if="item.handleShowFlag==1">
                                    <div class="lanBtn" @click.stop="resultCheck(item.id)">
                                        处理
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
                <div class="empty" v-else>
                    <img src="../../assets/images/empty2.png" alt="" />
                    <div>暂无数据</div>
                </div>
            </div>


            <van-floating-bubble v-model:offset="offset" @click="addTask">
                <template #default>
                    <div class="addTask">
                        <img src="../../assets/images/addTask.png" alt="" />
                        <div>新增</div>
                    </div>
                </template>
            </van-floating-bubble>
        </div>
    </div>
</template>

<script setup name="superviseList">
import { showConfirmDialog, showSuccessToast } from 'vant'
const { useRegister } = $globalStore
const router = useRouter()
const offset = ref({ x: -16, y: 500 })
const userId = ref(JSON.parse(sessionStorage.getItem('userInfo')).id)

const taskData = ref([
    { text: '全部', value: -1 },
    { text: '立案', value: 1 },
    { text: '待处理', value: 2 },
    { text: '已结束', value: 6 },
])

const addTask = () => {
    router.push({ name: 'addPunish', query: { id: '', taskId: '' } })
}

//获取任务列表
const refreshing = ref(false)
const finished = ref(false)
const loading = ref(false)
const tableList = ref([])
const total = ref(0)
const searchForm = ref({
    caseType: 1,
    pn: 1,
    ps: 5,
    status: -1,
    keyword: '',
})
const getTaskList = async () => {
    const res = await useRegister.getCaseInfoList(searchForm.value)
    tableList.value.push(...res.data.records)
    total.value = res.data.total
}

//模糊查询
const onSearch = () => {
    finished.value = false
    tableList.value = []
    searchForm.value.pn = 0
    onLoad()
}

//下拉菜单查询
const statusChange = () => {
    finished.value = false
    tableList.value = []
    searchForm.value.pn = 0
    onLoad()
}

const onRefresh = () => {
    // 清空列表数据
    tableList.value = []
    searchForm.value.pn = 0
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true
    onLoad()
}

const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            tableList.value = []
            refreshing.value = false
        }

        searchForm.value.pn++
        getTaskList()
        loading.value = false
        console.log(tableList.value)

        if (tableList.value.length >= total.value) {
            finished.value = true
            loading.value = true
        }
    }, 500)
}

const goBack = () => {
    router.push({ name: 'Home' })
}

//编辑任务
const editTask = (id, taskId) => {
    router.push({ name: 'addPunish', query: { id: id, taskId: taskId } })
}

//删除案件
const delTask = (id) => {
    showConfirmDialog({
        title: '删除案件',
        message: '确认删除该条案件吗？',
    })
        .then(() => {
            useRegister.deleteCaseInfo(id).then((res) => {
                console.log(res, 'res');
                if (res.code == 0) {
                    showSuccessToast({ message: '成功删除' })
                    finished.value = false
                    tableList.value = []
                    searchForm.value.pn = 0
                    loading.value = true
                    onLoad()
                }
            })
        })
        .catch(() => {
            // on cancel
        })
}

//查看详情
const detailTask = (id) => {
    router.push({ name: 'punishDetail', query: { id: id } })
}

//结果处理
const resultCheck = (id, status) => {
    router.push({ name: 'solvePunish', query: { id: id } })
}

onMounted(() => {
    getTaskList()
})
</script>

<style lang="scss" scoped>
.superviseList {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background-color: #f7f7f7;

    .list {
        width: 100%;
        height: 100%;
        margin-top: 46px;

        .table {
            width: 100%;
            height: calc(100% - 150px);
            overflow-y: auto;

            .list-box {
                margin: 10px 8px 0 8px;
                background: #ffffff;
                border-radius: 8px;

                .boxTop {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 16px 12px 12px 12px;
                    border-bottom: 1px solid #f5f5f5;

                    .title {
                        font-size: 16px;
                        font-weight: 500;
                        letter-spacing: 0px;
                        line-height: 24px;
                        color: #2b2b2b;
                    }

                    .tag {
                        padding: 4px 8px;
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 18px;
                        border-radius: 4px;
                    }

                    .blue {
                        color: #1764ce;
                        background-color: rgba(23, 100, 206, 0.1);
                    }

                    .green {
                        color: #3ca34e;
                        background-color: rgba(60, 163, 78, 0.1);
                    }

                    .orige {
                        color: #fc770a;
                        background-color: rgba(252, 119, 10, 0.1);
                    }

                    .skyblue {
                        color: #0091ff;
                        background-color: rgba(0, 145, 255, 0.1);
                    }

                    .skygreen {
                        color: #02ad82;
                        background-color: rgba(2, 173, 130, 0.1);
                    }
                }

                .boxContent {
                    padding: 12px;

                    .text-row {
                        font-size: 15px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 22px;
                        margin-bottom: 6px;
                        display: flex;
                        // align-items: center;

                        .row-msg {
                            color: #8c8c8c;
                            min-width: 75px;
                            margin-right: 12px;
                        }

                        .row-txt {
                            color: #4d4d4d;
                        }
                    }

                    .resultBox {
                        padding: 12px;
                        background: #f5f5f5;
                        border-radius: 4px;

                        .resultBox-top {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 6px;

                            .top-left {
                                display: flex;
                                align-items: center;

                                .left-icon {
                                    width: 4px;
                                    height: 12px;
                                    border-radius: 20px;
                                    background: linear-gradient(180deg, #5688f5 0%, #1764ce 100%);
                                    margin-right: 4px;
                                }

                                .left-text {
                                    font-size: 14px;
                                    font-weight: 400;
                                    letter-spacing: 0px;
                                    line-height: 21px;
                                    color: #666666;
                                }
                            }

                            .top-right {
                                font-size: 14px;
                                font-weight: 400;
                                letter-spacing: 0px;
                                line-height: 21px;
                            }
                        }

                        .resultBox-bottom {
                            display: flex;
                            justify-content: space-between;

                            .bottom-item {
                                font-size: 14px;
                                font-weight: 400;
                                letter-spacing: 0px;
                                line-height: 21px;

                                .text1 {
                                    color: #8c8c8c;
                                }

                                .text2 {
                                    color: #666666;
                                }
                            }
                        }
                    }
                }

                .boxBtn {
                    margin: 0 12px;
                    border-top: 1px solid #f0f0f0;

                    .boxBtn-1 {
                        display: flex;

                        .btn1 {
                            width: 7rem;
                            margin: 12px 0;
                            text-align: center;
                            flex-grow: 1;
                            font-size: 16px;
                            font-weight: 400;
                            letter-spacing: 0px;
                            line-height: 24px;
                        }
                    }

                    .boxBtn-2 {
                        text-align: center;
                        padding: 12px 0;
                        font-size: 16px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 24px;
                    }
                }
            }
        }
    }
}

.empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    >img {
        width: 128px;
        height: 96px;
    }

    >div {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(153, 153, 153, 1);
    }
}

.addTask {
    >img {
        width: 26px;
        height: 26px;
    }

    >div {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 21px;
    }
}

.huiBtn {
    color: #666666;
    border-right: 1px solid #f0f0f0;
}

.lanBtn {
    color: #1764ce;
}

.lanBtn2 {
    color: #666666;
}
</style>